<h1>{{ resource_allowed_project_title }}</h1>
<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h1 class="tlp-pane-title">
                <i class="fa fa-archive tlp-pane-title-icon"></i> {{ resource_allowed_project_subtitle }}
            </h1>
        </div>
        <section class="tlp-pane-section">
            <p class="tlp-alert-warning">{{ information }}</p>

            <div id="allowed-projects-list">
                <form id="projects-allowed-form" action="{{ update_allowed_projects_action }}" method="POST">
                    <div class="tlp-table-actions" id="allowed-projects-list-actions">
                        {{{ update_allowed_projects_action_csrf }}}

                        <div id="project-to-allow-autocompleter" class="tlp-form-element-append tlp-table-actions-element">
                            <select class="tlp-select" id="project-to-allow" name="project-to-allow" style="width: 100%" data-placeholder="{{ resource_allowed_project_list_allow_placeholder }}"></select>
                            <button type="submit" name="allow-project" class="tlp-append tlp-button-primary"
                                    value="1">
                                <i class="fa fa-arrow-circle-o-right tlp-button-icon"></i> {{ resource_allowed_project_list_allow_project }}
                            </button>
                        </div>
                        <div class="tlp-table-actions-spacer"></div>
                        <div class="tlp-form-element {{# there_is_no_project }}tlp-form-element-disabled{{/ there_is_no_project }}">
                            <input type="search"
                                id="filter-projects"
                                data-target-table-id="allowed-projects-list"
                                autocomplete="off"
                                class="tlp-search"
                                size="28"
                                placeholder="{{ resource_allowed_project_list_filter_placeholder }}"
                                {{# there_is_no_project }}disabled{{/ there_is_no_project }}
                            >
                        </div>
                    </div>

                    <table class="tlp-table" id="allowed-projects-list">
                        <thead>
                            <tr>
                                <th class="tlp-table-cell-numeric">{{ resource_allowed_project_list_id }}</th>
                                <th class="resource-restrictor-cell-project-name">{{ resource_allowed_project_list_name }}</th>
                            </tr>
                        </thead>
                        <tbody>
                        {{# there_is_no_project }}
                            <tr>
                                <td colspan="2" class="tlp-table-cell-empty">{{ resource_allowed_project_list_empty }}</td>
                            </tr>
                        {{/ there_is_no_project }}
                        {{^ there_is_no_project }}
                            <tr class="tlp-table-empty-filter">
                                <td colspan="2" class="tlp-table-cell-empty">{{ resource_allowed_project_filter_empty }}</td>
                            </tr>
                            {{# allowed_projects }}
                                <tr>
                                    <td class="tlp-table-cell-numeric tlp-table-cell-filterable">
                                        {{ getId }}
                                    </td>
                                    <td class="resource-restrictor-cell-project-name tlp-table-cell-filterable">
                                        <a href="{{ url_project }}?group_id={{ getGroupId }}">{{ getUnconvertedPublicName }}</a>
                                    </td>
                                </tr>
                            {{/ allowed_projects }}
                        {{/ there_is_no_project }}
                        </tbody>
                    </table>
                </form>
            </div>
        </section>
    </div>
</section>
